<!DOCTYPE html>
<html>
<head>
    <title>Hello ONLYOFFICE Documents</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8"/>
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">

    <!-- debug begin -->
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <!-- debug end -->

    <!-- release section -->
    <!--<link rel="stylesheet" type="text/css" href="styles.css">-->
    <!-- release end -->

    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #wrap {
            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
        }
    </style>

    <style type="text/css">
        .loadmask {
            left: 0;
            top: 0;
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
            border: none;
            background-color: var(--background-normal, #fff);
            z-index: 100;
        }

        .loader-page {
            top: 50%;
            left: 50%;
            position: absolute;
            margin-top: -40px;
            transform: translate(-50%);
        }

        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-Bold.ttf');
            font-weight: bold;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-BoldItalic.ttf');
            font-weight: normal;
            font-style: italic;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-ExtraBold.ttf');
            font-weight: bolder;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-ExtraBoldItalic.ttf');
            font-weight: bolder;
            font-style: italic;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-Italic.ttf');
            font-style: italic;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-Light.ttf');
            font-weight: 100;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-LightItalic.ttf');
            font-weight: lighter;
            font-style: italic;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('../../package/fonts/OpenSans-Regular.ttf');
            font-weight: normal;
        }
    </style>
</head>
<body>
    <script src="./htmlutils.js"></script>
    <div id="wrap">
        <div id="loading-mask" class="loadmask">
            <div id="stage" class="loader-page">
                <div class="roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
            </div>
        </div>
        <div id="placeholder">
            <div class="main-column col-left tool-menu">
              <div class="tool-quick-menu">
                <h3 class="createnew" l10n>Create new</h3>
                <li class="menu-item">
                  <a action="new:docx">
                    <i class="icon img-el"></i>
                    <span class="text" l10n>DOCUMENT</span>
                  </a>
                </li>
                <li class="menu-item">
                  <a action="new:xlsx">
                    <i class="icon img-el"></i>
                    <span class="text" l10n>SPREADSHEET</span>
                  </a>
                </li>
                <li class="menu-item">
                  <a action="new:pptx">
                    <i class="icon img-el"></i>
                    <span class="text" l10n>PRESENTATION</span>
                  </a>
                </li>
              </div>
                <!-- <button id="btn-add">Add</button> -->
                <!-- <button id="btn-add2">Add 2</button> -->
              <li class="menu-item separator"></li>
            </div>
            <div class="main-column col-center after-left">
            </div>
        </div>
    </div>

    <script src="../vendor/svg-injector/svg-injector.min.js"></script>
    <img class="inline-svg" src="../res/img/connect1.svg">
    <img class="inline-svg" src="../res/img/connect2.svg">
    <img class="inline-svg" src="../res/img/connect3.svg">
    <img class="inline-svg" src="../res/img/connect1_dark.svg">
    <img class="inline-svg" src="../res/img/connect2_dark.svg">
    <img class="inline-svg" src="../res/img/connect3_dark.svg">
    <img class="inline-svg" src="../res/img/welcome.svg">
    <img class="inline-svg" src="../res/img/welcome_dark.svg">
    <img class="inline-svg" src="../res/img/logo.svg">
    <script>
        var svgpoints = document.querySelectorAll('img.inline-svg');
        SVGInjector(svgpoints, {evalScripts:'never'});
    </script>

    <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/dropdown.js"></script>
    <script src="../vendor/bootstrap-select/js/bootstrap-select.js"></script>
    <!-- <script type="text/javascript" src="../vendor/bootstrap/bootstrap.mods.js"></script> -->
    <script type="text/javascript" src="utils.js"></script>
    <script type="text/javascript" src="locale.js"></script>
    <script type="text/javascript" src="events.js"></script>
    <script type="text/javascript" src="sdk.js"></script>
    <script type="text/javascript" src="model.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    <script type="text/javascript" src="base.js"></script>
    <script type="text/javascript" src="panelrecent.js"></script>
    <script type="text/javascript" src="panelfolders.js"></script>
    <script type="text/javascript" src="panelconnect.js"></script>
    <script type="text/javascript" src="panelabout.js"></script>
    <script type="text/javascript" src="panelwelcome.js"></script>
    <script src="panelsettings.js"></script>
    <script src="panelexternal.js"></script>
    <script type="text/javascript" src="dlglogin.js"></script>
    <script src="dialogconnect.js"></script>
    <script type="text/javascript" src="panels.js"></script>

    <!-- debug begin -->
    <script type="text/javascript">var less=less||{};less.env='development';less.ieCompat=false;</script>
    <script src="../vendor/less/dist/less.js" type="text/javascript"></script>
    <script>window.relpath = '..'</script>
    <!-- debug end -->
    <!-- <script type="text/javascript" src="login.js"></script> -->
</body>
</html>
